<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE-edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人信息</title>
    <!-- Import style -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>
    <script src="./static/element-plus/theme-chalk/display.css"></script>
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <style>
        .el-carousel__container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="4" style="display: flex; flex-direction: row; align-items: center">
                        <img src="./static/images/logo.png" style="height: 60px" />
                        <h2 style="padding-left: 4px">技术社区</h2>
                    </el-col>
                    <el-col :span="8">
                        <el-menu :default-active="activeIndex" mode="horizontal" style="border-bottom: none !important">
                            <el-menu-item index="1">首页</el-menu-item>
                            <el-menu-item index="2">文章</el-menu-item>
                            <el-menu-item index="3">课程</el-menu-item>
                            <el-menu-item index="4">商城</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="8" style="height: 60px; line-height: 60px" class="hidden-only-sm">
                        <el-input placeholder="请输入关键字" />
                    </el-col>
                    <el-col :span="4" style="text-align: right; height: 60px; line-height: 60px"
                        class="hidden-only-sm;">
                        <img src="./static/images/avatar.png" style="width: 30px; height: 30px; border-radius: 50%" />
                        <el-link type="primary" style="padding-left: 4px">{{user.username}}</el-link>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside>
                    <el-card style="margin: 20px;">
                    <el-menu default-active="activeIndex">
                        <el-menu-item index="1"><i class="fas fa-home"></i>个人主页</el-menu-item>
                        <el-menu-item index="2"><i class="fas fa-user"></i>个人资料</el-menu-item>
                        <el-menu-item index="3"><i class="fas fa-cog"></i>账号设置</el-menu-item>
                        <el-menu-item index="4"><i class="fas fa-bell"></i>消息设置</el-menu-item>
                        <el-menu-item index="5"><i class="fas fa-database"></i>标签管理</el-menu-item>
                    </el-menu>
                </el-card>
                </el-aside>
                <el-main>
                  <el-card>
                        <el-col :span="4">
                            <img src="./static/images/avatar.png" style="width: 100px; height: 100px; border-radius: 50%" />
                        </el-col>
                        <el-col  :span="20">
                            <h2>{{user.username}}</h2>
                            <span>性别：{{user.gender}}</span><br />
                            <span>签名档：{{user.sign}}</span>
                        </el-col>
                    </el-row>
                  </el-card>
                  <el-card>
                   <el-tabs>
                    <el-tab-pane label="我发布的文章">
                        <div v-if="myArticleList.length>0">列表数据
                            <ul>
                                <li v-for="myarticle in myArticleList" :key="myarticle.id">
                                  {{ myarticle.title }}<br />{{ myarticle.time}}
                                </li>
                            </ul>
                        </div>
                        <el-empty v-else desciption="暂无数据"/>
                    </el-tab-pane>
                    <el-tab-pane label="我收藏的文章">
                        <div v-if="articleList.length>0">列表数据
                            <ul>
                                <li v-for="article in articleList" :key="article.id">
                                  {{ article.title }}
                                </li>
                            </ul>
                        </div>
                        <el-empty v-else desciption="暂无数据"/>
                    </el-tab-pane>
                    <el-tab-pane label="我收藏的课程">
                        <div v-if="courseList.length>0">列表数据
                            <ul>
                                <li v-for="course in courseList" :key="course.id">
                                  {{ course.title }}
                                </li>
                            </ul>
                        </div>
                        <el-empty v-else desciption="暂无数据"/>
                    </el-tab-pane>
                    <el-tab-pane label="我收藏的商品">
                        <div v-if="productList.length>0">列表数据
                            <ul>
                                <li v-for="product in productList" :key="product.id">
                                  {{ product.type }}<br />价格：{{ product.price }}
                                </li>
                            </ul>
                        </div>
                        <el-empty v-else desciption="暂无数据"/>
                    </el-tab-pane>
                   </el-tabs>
                  </el-card>
                </el-main>
            </el-container>
            <el-footer>
                <el-row>
                    <el-col :xs="24" :lg="8" style="display: flex; flex-direction: row; align-items: center">
                        <div>
                            <img src="./static/images/logo.png" style="height: 100px" />
                        </div>
                        <div>
                            <h2 style="padding-left: 4px">技术社区</h2>
                            <p style="padding-left: 4px">
                                致力构建一个专业的IT技术交流社区
                            </p>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="10" style="
                display: flex;
                flex-direction: column;
                text-align: center;
                padding-top: 3%;
              ">
                        <div style="
                  display: flex;
                  flex-direction: row;
                  gap: 70px;
                  padding-left: 15px;
                ">
                            <el-link type="primary">首页</el-link>
                            <el-link type="primary">咨询</el-link>
                            <el-link type="primary">课程</el-link>
                            <el-link type="primary">商城</el-link>
                        </div>
                        <div style="display: flex; flex-direction: row; gap: 43px">
                            <el-link type="primary">关于我们</el-link>
                            <el-link type="primary">使用手册</el-link>
                            <el-link type="primary">隐私条款</el-link>
                            <el-link type="primary">建议反馈</el-link>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="6">
                        <div>
                            <h2>联系我们</h2>
                            <p>电话：123456789</p>
                            <p>邮箱：software@develop.com</p>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="24" style="background-color: deepskyblue">
                        <p style="text-align: center">软件开发工作室版权所有</p>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>
</body>
<script>
    var App = {
        data() {
            return {
                user: {
                    username: "张三",
                    gender:"男",
                    job:"前端开发工程师",
                    sign:"这个人很懒，什么都没有留下",
                },
                activeIndex: "1",
                myArticleList:[
                {title:'Vue3.0新特性使用攻略',time:"2024-10-28"},
                {title:'Vue3.0脚手架使用详解',time:"2024-10-25"},
                {title:'ElementPlus框架应用场景',time:"2024-10-17"},
                {title:'5款独立开发者必备神器',time:"2024-10-12"}
                ],
                articleList:["001"],
                courseList:[
                //{title:"零基础学JavaScript",price:49},
                //{title:"Vue.js从入门到实战",price:199},
                //{title:"深入浅出状态管理",price:29},
                //{title:"说透大厂前端项目面试题",price:69}
                ],
                productList:[
                { type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: './static/images/product01.png' },
                { type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: './static/images/product02.png' },
                { type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: './static/images/product03.png' },
                { type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: './static/images/product04.png' },
                { type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: './static/images/product05.png' },
                { type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: './static/images/product06.png' },
                { type: '马克杯', name: '白色陶瓷杯，简约IT标志，时尚办公新选择', price: 12, stock: 100, img: './static/images/product07.png' },
                { type: '贴纸', name: '科技与创意碰撞——IT社区蓝色徽章文创', price: 39, stock: 80, img: './static/images/product08.png' },
                ],
            };
        },
    };
    Vue.createApp(App).use(ElementPlus).mount("#app");
</script>

</html>